<template>
    <div >
      <a-card hoverable style="width:30%  ;display: inline-block;">
        <img
          slot="cover"
          alt="example"
          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
        <template slot="actions" class="ant-card-actions">
          <a-icon key="setting" type="setting" />
          <a-icon key="edit" type="edit" />
          <a-icon key="ellipsis" type="ellipsis" />
        </template>
        <a-card-meta title="Card title" description="This is the description">
          <a-avatar
            slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
        </a-card-meta>
      </a-card>

      <div style="display: inline-block;width:60%;background-color: #fff;
      margin-left:10px;padding:10px;vertical-align: top;box-shadow: 1px 1px 2px 2px #e3e3e3;border-radius:2px;
      max-height:400px;overflow:auto">
        <div>
          <span style="font-size:15px">代办事项</span>
          <span style="color:#1890ff;margin-left:20px;cursor:pointer;" @click="addDeal()">添加</span>
        </div>
        <a-divider />
        <ul>

          <li v-for="item in data">
            <a-checkbox value="item.box" name="type"></a-checkbox>
            <input class="deal" style="outline: none;border:0;" placeholder="待办" :value="item.title"/>
<!--            <input class="deal" contenteditable="true" style="outline: none">{{// item.title}}</input>-->
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  const data = [
      {
          title: '待办1',
          box:1
      },
      {
          title: '待办2',
          box:2
      },
      {
          title: 'Ant Design Title 3',
          box:3
      },
      {
          title: 'Ant Design Title 4',
          box:4
      },
  ];
    export default {
        name: "AdminInfo",
        data () {
            return {
                data: data,
                editTitle: "待办"
            }
        },
        methods: {
            addDeal () {
                console.log(this)
                this.data.push({
                    title: '待办',
                    box:data.length
                })

                // let liDom = document.getElementsByName("ul li")[data.length]
                // liDom.innerText = "123"
                setTimeout(function () {
                    // console.log(data.length)
                    // console.log(document.getElementsByClassName("deal")[data.length-1])
                    let input = document.getElementsByClassName("deal")[data.length-1]
                    input.focus()
                    input.select()
                })
            }
        }
    }
</script>

<style scoped>
  ul,li{
    list-style: none;
  }
  ul{
    display: inline-block;
  }
  ul li{
    height:35px;
  }
</style>
